<template>
	<view class="userinfo" :class='APPTheme'>
		<uni-nav-bar fixed status-bar  left-icon="back" title="用户详情" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickLeft="$lizhao.lznavigate.lzNavigateBack()"></uni-nav-bar>
		<view class="lz-flex">
			<view class="u-m-r-10">
				<u-avatar v-if="userData.photo" :src="GLOBAL.image_svr+userData.photo"  size="140"></u-avatar>
				<view class="text-warp" v-else >{{computedUserInfo(userData)}}</view>
			</view>
			<view class="lz-flex-center">
				<view class="u-font-18 u-p-b-20">{{userData.name}}</view>
				<view class="lz-font-14 theme-tips-color">手机号:{{userData.phone}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<u-cell-group class="theme-bg" :border="false">
			<u-cell-item title="设置备注" hover-class="theme-bg-active" @click="cellItemClick(1)"></u-cell-item>
			<u-cell-item title="拨打号码" hover-class="theme-bg-active" @click="cellItemClick(2)"></u-cell-item>
		</u-cell-group>
		<u-cell-group class="theme-bg" :border="false">
			<u-cell-item  hover-class="theme-bg-active" :arrow="false"  @click="sendMessage">
				<view slot="title" class="solt-cell-item">发消息</view>
			</u-cell-item>
		</u-cell-group>
		<!-- 对话框 -->
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" :value="dialog.value" :title="dialog.title" :placeholder="dialog.placeholder" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
			computedUserInfo(){
				return (item)=>{
					let user=''
					if(item.name){
						user=item.name.slice(item.name.length-2,item.name.length);
					}
					return user
				}
			}
		},
		components:{
			uniPopupDialog
		},
		data() {
			return {
				userId:"",
				userData:'',//用户信息
				dialog:{//弹出对话框
					title:'',
					placeholder:'',
					value:''
				}
			}
		},
		onLoad(e) {
			that = this
			that.userId=e.userId
			//获取用户信息
			that.getfindUserById()
		},
		onShow() {
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
		},
		onTabItemTap(e) {
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
		},
		methods: {
			//点击每一行
			cellItemClick(index){
				if(index==1){//修改备注
					that.$refs.dialogInput.open()
					that.dialog={
						title:'设置备注',
						placeholder:'请输入备注',
						value:that.userData.name
					}
				}else if(index==2){
					uni.makePhoneCall({
					    phoneNumber: that.userData.phone
					});
				}
			},
			//点击确认弹框
			dialogInputConfirm(fn,item){
				console.log(item);
				if(item.length==0){
					that.$refs.dialogInput.close()
					uni.showToast({
						title: '内容不能为空',
						icon:'none'
					});
					return
				}
				let req={
					userId:JSON.parse(that.userInfo).id,//当前用户id
					remarksId:that.userData.id,//修改用户id
					remarksName:item,// 备注名
				}
				that.GLOBAL.doGet(that.api.GLOBAL_rest_webSocket_chat_updateRemarks,req).then(res=>{
					if(res.code=='0'){
						uni.showToast({
							title: res.data,
							icon:'none'
						});
						that.$refs.dialogInput.close()
						uni.$emit('page_userInfo_refresh',true)
						//获取用户信息
						that.getfindUserById()
					}
				})
			},
			//获取用户信息
			getfindUserById(){
				that.GLOBAL.doGet(that.api.GLOBAL_rest_sys_user_findUserById,{id:that.userId}).then(res=>{
					console.log(res);
					if(res.code=='0'){
						that.userData=res.data
					}
				})
			},
			//发送消息
			sendMessage(){
				uni.navigateTo({
					url: '../../IM/lz-chat/lz-chat?receiveId='+that.userData.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}

	}
</script>

<style scoped lang="scss">
	.userinfo {
		height: 100%;
		.lz-flex{
			display: flex;padding: 15px;justify-content: space-between;align-items: center;
			.lz-flex-center{
				flex: 1;overflow: hidden;margin-left: 10px;
			}
		}
		.theme-bg{
			margin-bottom: 5px;
			.solt-cell-item{
				color: #c84751;text-align: center;width: 90vw;letter-spacing: 2px;
			}
		}
		.text-warp{
			background: $bg-color;border-radius: 50%;width:140rpx;height: 140rpx;font-size: 12px;display: flex;justify-content: center;align-items: center;color: #fff;
		}
	}
</style>
